<template>
  <div class="recommend-link hover-style" v-if="!getIsPhone">
    <div class="links">
      <div class="add-links box-shadow" @click="addLinks">
        <div class="wrapper">
          <span class="icon">
            <i class="iconfont icontg_tianjia"></i>
          </span>
          <p class="text">添加推广链接</p>
        </div>
      </div>
      <recommend-card 
        class="add-links" 
        v-for="item in linkData" 
        :key="item.id" 
        :linkDetails="item"
        @delete="deleteLinkCard"
        @click="linkDataUpdate"
      >
      </recommend-card>
    </div>
    <bc-modal v-show="showAddLinks">
      <add-link @click="updateLinkData" @hide-link="hideAddLinks"></add-link>
    </bc-modal>
  </div>
  <div class="recommend-link" v-else>
    <header-template-phone>
      <template v-slot:left>
        <header-back></header-back>
      </template>
      <template v-slot:center>
        <div class="center-context">
          <span class="text" style="fontSize: 15px">
            推广链接
          </span>
        </div>
      </template>
      <template v-slot:right>
        <span class="icon" @click="addLinks">
          <i class="iconfont icontg_tianjia"></i>
        </span>
      </template>
    </header-template-phone>
    <div class="main">
      <div class="wrapper box-shadow" v-for="item in linkData" :key="item.id">
        <recommend-card 
          :linkDetails="item"
          @delete="deleteLinkCard"
          @click="linkDataUpdate"
        ></recommend-card>
      </div>
    </div>
    <add-link 
      v-show="showAddLinks"
      @click="updateLinkData" @hide-link="hideAddLinks">
    </add-link>
    <!-- <link-detail :showLinkDetails="showLinksDetails" @edit="showEditPage"></link-detail> -->
  </div>
</template>
<script>

import RecommendCard from './recommend-card'
import AddLink from './add-link'
import LinkDetail from './link-detail'
import BcModal from '@/components/base/bc-modal/bc-modal'
// import RecommendCardPhone from './recommend-card-phone'
import HeaderTemplatePhone from '@/components/base/phone/header-template-phone/header-template-phone'
import HeaderBack from '@/components/base/header-back/header-back'

import { findIndexById, formatDateNoYear } from '@/assets/js/util'
import { mapGetters } from 'vuex'
export default {
  components: {
    LinkDetail,
    RecommendCard,
    AddLink,
    BcModal,
    HeaderTemplatePhone,
    HeaderBack
  },
  data() {
    return {
      showAddLinks: false,
      linkData: [
        {
          id: 1,
          accountType: '代理',
          visited: 1989,
          registed: 26,
          lotteryRefund: 2000,
          lotteryRefundRate: 0.26,
          agRefund: 2000,
          agRefundRate: 0.26,
          chrownRefund: 2000,
          chrownRefundRate: 0.26,
          bonus: 2000,
          bonusRefundRate: 0.26,
          salary: 2000,
          salaryRefundRate: 0.26,
          link: 'www.baidu.com',
          invitingCode: 'ABCDEDFR23F'
        },
        {
          id: 2,
          accountType: '会员',
          visited: 1909,
          registed: 26,
          lotteryRefund: 200,
          lotteryRefundRate: 0.026,
          agRefund: 200,
          agRefundRate: 0.026,
          chrownRefund: 2000,
          chrownRefundRate: 0.026,
          bonus: 2000,
          bonusRefundRate: 0.026,
          salary: 2000,
          salaryRefundRate: 0.026,
          link: 'www.baidu.com',
          invitingCode: 'ABCDEDFR23F'
        },
        {
          id: 3,
          accountType: '代理',
          visited: 1989,
          registed: 26,
          lotteryRefund: 2000,
          lotteryRefundRate: 0.026,
          agRefund: 2000,
          agRefundRate: 0.026,
          chrownRefund: 2000,
          chrownRefundRate: 0.026,
          bonus: 2000,
          bonusRefundRate: 0.026,
          salary: 2000,
          salaryRefundRate: 0.026,
          link: 'www.baidu.com',
          invitingCode: 'ABCDEDFR23F'
        },
        {
          id: 4,
          accountType: '会员',
          visited: 1980,
          registed: 26,
          lotteryRefund: 2000,
          lotteryRefundRate: 0.026,
          agRefund: 2000,
          agRefundRate: 0.026,
          chrownRefund: 2000,
          chrownRefundRate: 0.026,
          bonus: 2000,
          bonusRefundRate: 0.026,
          salary: 2000,
          salaryRefundRate: 0.026,
          link: 'www.baidu.com',
          invitingCode: 'ABCDEDFR23F'
        },
        {
          id: 5,
          accountType: '代理',
          visited: 19,
          registed: 2,
          lotteryRefund: 2000,
          lotteryRefundRate: 0.026,
          agRefund: 2000,
          agRefundRate: 0.026,
          chrownRefund: 2000,
          chrownRefundRate: 0.026,
          bonus: 2000,
          bonusRefundRate: 0.026,
          salary: 2000,
          salaryRefundRate: 0.026,
          link: 'www.baidu.com',
          invitingCode: 'ABCDEDFR23F'
        },
      ],
      showLinksDetails: false 
    }
  },
  methods:{
    // pc头部导航
    updateActiveIndex(index) {
      this.activeIndex = index
    },
    // pc团队个人 
    updateABTabIndex(index) {
      this.activeSwitchIndex = index
    },
    // pc最近几天
    updateRecentIndex(index) {
      this.activeRecentIndex = index
    },
    formatDate(row, column, cellValue) {
      return formatDateNoYear(cellValue)
    },
    addLinks() {
      this.showAddLinks = true 
    },
    hideAddLinks() {
      this.showAddLinks = false 
    },
    // 添加链接
    updateLinkData(link) {
      this.showAddLinks = false 
      let mockdata = {...link, 
        link:'www.wds.com', 
        invitingCode: 'AAAAAA223DFS',
        lotteryRefund: 10,
        agRefund: 10,
        bonus: 10,
        salary: 10, 
        chrownRefund: 10,
      }
      this.linkData.unshift(mockdata)
    },
    // 更新编辑链接 
    linkDataUpdate(data) {
     
      let id = data.id 
      
      this.linkData.some((link, index) => {
        if (link.id == id) {
          this.$set(this.linkData, index, { ...link, ...data})
          // this.linkData[index] = {...link, ...data}
          console.log(this.linkData)

          return true 
        }
        return false 
      })
    },
    // addLink() {
    //   this.$router.push({path: '/me/recommend-link/add'})
    // },
    deleteLinkCard(id) {
      this.linkData.forEach((link, index) => {
        if (link.id == id) {
          this.linkData.splice(index, 1)
        }
      })
    },
    showEditPage() {

    },

    

  },
  computed: {
    ...mapGetters('lottery', ['getIsPhone', 'getUserInfo']),
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  @media screen and (min-width 750px) 
    .links 
      display flex 
      flex-wrap wrap 
      box-sizing border-box 
      padding 20px 20px 0 20px
      .add-links 
        width 276px 
        height 160px 
        border-radius 3px 
        border 1px solid $color-divide-line
        margin-bottom 20px
        margin-right 15px
        box-sizing border-box
        text-align center
        &:nth-child(4n + 4) 
          margin-right 0
        .wrapper 
          margin-top 45px
          .icon 
            color #cccdd0
            .iconfont 
              font-size 28px
          .text 
            font-size 15px 
            font-weight 700
            margin-top 10px 
  @media screen and (max-width 750px) 
    .main 
      box-sizing border-box 
      padding 0 10px
      padding-top 58px  
      .wrapper 
        background #fff
        border-radius 3px 
        border 1px solid $color-divide-line
        margin-bottom 10px
          
        
          
</style>